<template>
  <div ref="el" class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <div class="dataScreen-header">
        <div class="header-lf">
          <div class="building-name">{{ buildingName }} <img src="../images/down-icon.png" alt="" /></div>
          <el-tree-select class="build-select" node-key="id" :props="{ label: 'name', children: 'children' }"
            v-model="treeValue" :data="buildingTreeList" :render-after-expand="false" style="width: 240px"
            @node-click=nodeClick />
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>{{ ['早上出寝', '中午入寝', '中午出寝', '下午入寝', '下午出寝', '晚上入寝'][peopleStat.attendanceShift + 1] }}</span>
            <div v-if="peopleStat.startTime">{{ peopleStat.startTime }}-{{ peopleStat.endTime }}</div>
          </div>
        </div>
        <div class="header-ri">
          <div class="flex-center">
            <span class="header-time">{{ time }}</span>
            <div class="full-icon" @click="toggle" style="padding-top: 5px;">
              <img src="../images/full-icon.png" alt="" />
            </div>
          </div>
          <div class="flex-center">
            <span class="header-time" style="font-size: 36px;">{{ time1 }}</span>
            <img src="../images/setting-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="dataScreen-main">
        <div class="main-left">
          <div class="title">宿舍统计</div>
          <div class="statistics-box">
            <div class="box-item">
              <div>
                <img class="item-img" src="../images/top-bg-item1.png" alt="" />
              </div>
              <div class="item-right">
                <div class="num">{{ peopleStat.allCount }}</div>
                <div>总住宿人数</div>
              </div>
            </div>
            <div class="box-item">
              <div>
                <img class="item-img" src="../images/top-bg-item2.png" alt="" />
              </div>
              <div class="item-right">
                <div class="num">{{ peopleStat.inCount }}</div>
                <div>当前归寝人数</div>
              </div>
            </div>
            <div class="box-item">
              <div>
                <img class="item-img" src="../images/top-bg-item3.png" alt="" />
              </div>
              <div class="item-right">
                <div class="num">{{ peopleStat.outCount }}</div>
                <div>当前未归人数</div>
              </div>
            </div>
            <!-- <div class="box-item">
              <div>
                <img class="item-img" src="../images/top-bg-item4.png" alt="" />
              </div>
              <div class="item-right">
                <div class="num">150</div>
                <div>今日请假人数</div>
              </div>
            </div> -->
            <div class="box-item">
              <div>
                <img class="item-img" src="../images/top-bg-item5.png" alt="" />
              </div>
              <div class="item-right">
                <div class="num">{{ peopleStat.leaveCount }}</div>
                <div>今日请假人数</div>
              </div>
            </div>
          </div>
          <div class="floor-box">
            <div class="floor-box-left">
              <!-- <div class="box-left-item active">全部</div> -->
              <div class="box-left-item" :class="[index === activeIndex && 'active']" v-for="(item, index) in floorList"
                :key="index" @click="floorClick(item, index)">
                {{ item.name }}
              </div>
            </div>
            <div class="floor-box-right">
              <div class="box-left-right">归寝</div>
              <div class="box-left-right">未归</div>
              <div class="box-left-right">请假</div>
              <div class="box-left-right">请假</div>
            </div>
          </div>
          <div class="dormitory-box" :class="!shifMemberList.length && 'no-data'">
            <template v-if="shifMemberList.length">
              <div class="dormitory-item" v-for="(item, index) in shifMemberList" :key="index">
                <div class="header">
                  <span class="roomName">{{ item.roomName }} </span>
                  <span class="count">({{ item.normalCount }}/{{ item.allCount }})</span>
                </div>
                <div class="main">
                  <!-- status-1 -->
                  <div class="name" v-for="(ele, idx) in item.memberList" :key="idx">{{ ele.studentName }}</div>
                </div>
              </div>
            </template>
            <div v-else class="no-data-box">
              <img src="../images/no-data.png" alt="" />
              毫无数据
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="top-panel">
            <div class="title">宿管人员</div>
            <div class="main">
              <template v-if="dormitoryManagerList.length">
                <div class="item" v-for="(item, index) in dormitoryManagerList" :key="index">
                  <div class="item-left">宿管</div>
                  <div class="item-right">
                    <div class="item-img">
                      <img class="avatar" :src="item.facePic" alt="" />
                    </div>
                    <div class="item-img">
                      <div class="name">{{ item.realName }}</div>
                      <div class="phone">{{ item.phone }}</div>
                    </div>
                  </div>
                </div>
              </template>
              <div v-else class="no-data-box">
                <img src="../images/no-data.png" alt="" />
              </div>
            </div>
          </div>
          <div class="center-panel">
            <div class="title">宿舍警告</div>
            <div class="more">更多</div>
            <div class="main">
              <template v-if="alarmList.length">
                <div class="item" v-for="(item, index) in alarmList" :key="index">
                  <div class="item-left">串寝人员</div>
                  <div class="item-right">
                    <div class="item-img">
                      <img class="avatar" :src="item.facePic || DefaultAvatar" alt="" />
                    </div>
                    <div class="item-img">
                      <div class="name">{{ item.studentName || '陌生人' }}</div>
                      <div class="time">{{ item.alertTime }}</div>
                    </div>
                  </div>
                </div>
              </template>
              <div v-else class="no-data-box">
                <img src="../images/no-data.png" alt="" />
                毫无数据
              </div>
            </div>
          </div>
          <div class="bottom-panel">
            <div class="title">今日请假</div>
            <div class="more">更多</div>
            <div class="main">
              <!-- {{ leaveList }} -->
              <div class="no-data-box">
                <img src="../images/no-data.png" alt="" />
                毫无数据
              </div>
            </div>
          </div>
        </div>
        <img class="bottom-bg" src="../images/bottom-bg.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataScreen">
import { shifPeopleStat, getBuildingTreeList, listDormitoryManager, attendanceAlarmList, listStudentLeave, shifMember } from '@/api/bigScreen';
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useDateFormat, useFullscreen } from '@vueuse/core'
import DefaultAvatar from '../images/default-avatar.png'
const dataScreenRef = ref<HTMLElement | null>(null);
const el = ref<HTMLElement>();
const { toggle } = useFullscreen(el);
onMounted(() => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
  init()
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const treeValue = ref<string>('')
const activeIndex = ref<number>(0)
const buildingId = ref<string>('')
const floorId = ref<string>('')
const buildingName = ref<string>('')
const peopleStat = ref<any>({})
const buildingTreeList = ref<any>([])
const _buildingTreeList = ref<any>([])
const floorList = ref<any>([])
const dormitoryManagerList = ref<any>([])
const alarmList = ref<any>([])
const leaveList = ref<any>([])
const shifMemberList = ref<any>([])
const init = async () => {
  const res = await shifPeopleStat({
    buildingId: buildingId.value,
    floorId: floorId.value
  })
  peopleStat.value = res.data

  const res1 = await getBuildingTreeList()
  _buildingTreeList.value = res1.data
  const data = proxy?.handleTree<BuildingTreeVO>(res1.data.filter(item => item.type === 'B'), 'id', 'parentId');
  if (data) {
    buildingTreeList.value = data;
    if (!treeValue.value && buildingTreeList.value.length) {
      treeValue.value = buildingTreeList.value[0].id
      buildingId.value = buildingTreeList.value[0].sourceId
      buildingName.value = buildingTreeList.value.find((ele: any) => ele.sourceId === buildingId.value && ele.parentId)?.name
    }
    floorList.value = res1.data.filter((item: any) => item.parentId === treeValue.value)
    floorList.value.unshift({ name: '全部', sourceId: '' })
  }
  const res2 = await listDormitoryManager({
    buildingId: buildingId.value,
    floorId: floorId.value
  })
  dormitoryManagerList.value = res2.data
  const res3 = await attendanceAlarmList({
    buildingId: buildingId.value,
    floorId: floorId.value
  })
  alarmList.value = res3.rows.map((item: any) => {
    item.alertTime = useDateFormat(item.alertTime, 'HH:mm:ss')
    return item
  })
  const res4 = await listStudentLeave({
    buildingId: buildingId.value,
    floorId: floorId.value
  })
  leaveList.value = res4.data
  const res5 = await shifMember({
    buildingId: buildingId.value,
    floorId: floorId.value
  })
  shifMemberList.value = extractRoomList(res5.data, [])

};
const extractRoomList = (data: any, roomListArray: any) => {
  data.forEach((item: any) => {
    if (item.roomList) {
      roomListArray.push(...item.roomList);
    } else if (item.floorList) {
      extractRoomList(item.floorList, roomListArray);
    }
  });
  return roomListArray;
}

const nodeClick = (item: any) => {
  if (item.type === 'B') {
    buildingId.value = item.sourceId
    buildingName.value = _buildingTreeList.value.find((ele: any) => ele.sourceId === item.sourceId  && ele.parentId)?.name
  } else {
    floorId.value = item.sourceId
  }
  init()
}
const floorClick = async (item: any, index: number) => {
  activeIndex.value = index
  floorId.value = item.sourceId
  const res5 = await shifMember({
    buildingId: buildingId.value,
    floorId: floorId.value
  })
  shifMemberList.value = extractRoomList(res5.data, [])
}
// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
const formatDate = () => {
  // 获取当前时间
  const now = new Date();
  // 获取年、月、日、时、分、秒
  const year = now.getFullYear();
  const month = ("0" + (now.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1
  const day = ("0" + now.getDate()).slice(-2);
  const hours = ("0" + now.getHours()).slice(-2);
  const minutes = ("0" + now.getMinutes()).slice(-2);
  const seconds = ("0" + now.getSeconds()).slice(-2);
  const formattedTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  const formattedTime1 = hours + ":" + minutes + ":" + seconds;
  // 格式化输出
  return { formattedTime, formattedTime1 };
};
// 获取当前时间
let timer;
let time = ref(formatDate().formattedTime);
let time1 = ref(formatDate().formattedTime1);
timer = setInterval(() => {
  time.value = formatDate().formattedTime;
  time1.value = formatDate().formattedTime1;
}, 1000);

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
  clearInterval(timer);
});
</script>
<style lang="scss" scoped>
@import "./backBed.scss";
</style>
